<script lang="ts" setup>
import type { ImageProps } from 'element-plus';
import ImageChampionEmpty from '@/assets/images/champion_empty.png'
import { ElImage } from 'element-plus'
import { getCurrentInstance, h, ref, watch } from 'vue'

interface ChampionAvatarProps extends ImageProps {
  id: string | number,
  width: string,
  height: string,
  borderRadius: string,
}

const props = withDefaults(defineProps<Partial<ChampionAvatarProps>>(), {
  width: '4.5rem',
  height: '4.5rem',
  borderRadius: '100%',
  loading: 'lazy',
})

const vm = getCurrentInstance()

function changeRef(instance) {
  vm.exposeProxy = vm.exposed = instance || {}
}

const src = ref('')
// 根据ID获取src
function getSrcById(id: string | number) {
  src.value = `https://cdn.communitydragon.org/latest/profile-icon/${id}`
}

watch(() => props.id, (id) => {
  getSrcById(id)
}, { immediate: true })
</script>

<template>
  <div class="champion_avatar overflow-hidden"
    :style="{ width: props.width, height: props.height, borderRadius: props.borderRadius }">
    <component :is="h(ElImage, { ...$attrs, ...props, ref: changeRef, src }, $slots)">
      <template #placeholder>
        <img class="placeholder_image" :src="ImageChampionEmpty" alt="">
      </template>
      <template #error>
        <img class="placeholder_image" :src="ImageChampionEmpty" alt="">
      </template>
    </component>
  </div>
</template>

<style lang="scss" scoped>
.champion_avatar {
  ::v-deep(.el-image) {
    .el-image__inner {
      transform: scale(1.2);
    }
  }
  .placeholder_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
  }
}
</style>
